<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <#include "/comm/module-edit.ftl"/>
</head>
<style type="text/css">
    .layui-form-label {
        width: 90px;
    }

    .layui-input-block {
        margin-left: 120px;
    }
</style>
<body>
<div class="layui-div-body">
    <div class="layui-fluid layui-div-edit">
        <form class="layui-form layui-form-pane" autocomplete="off">
            <div class="layui-form-item">
                <label class="layui-form-label">企业logo</label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" id="ID-upload-icon-btn">
                        <i class="layui-icon layui-icon-upload"></i> 选择企业logo
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img imageLoad" id="ID-upload-icon-img"
                                 style="width: 100%; height: 92px;"
                                 src="${resUrl}${info.logo!request.contextPath+'/assets/images/imageLoadError.jpg'}">
                            <input type="hidden" id="icon" name="logo" value="${info.logo!}">
                            <div id="ID-upload-icon-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes"
                             lay-filter="filter-icon">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">企业名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入企业名称" class="layui-input"
                           value="${info.name!}"  lay-verify="required" lay-reqtext="请输入企业名称">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系人</label>
                <div class="layui-input-inline">
                    <input type="text" name="contacts" placeholder="请输入联系人" class="layui-input" value="${info.contacts!}"  lay-verify="required" lay-reqtext="请输入联系人">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" placeholder="请输入电话" class="layui-input" value="${info.phone!}"  lay-verify="required|phone" lay-reqtext="请输入电话">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">联系地址</label>
                <div class="layui-input-inline">
                    <select id="province" lay-filter="province" lay-verify="required"
                            lay-reqtext="请选择联系地址"></select>
                </div>
                <div class="layui-input-inline">
                    <select id="city" lay-filter="city" lay-verify="required" lay-reqtext="请选择联系地址"></select>
                </div>
                <div class="layui-input-inline">
                    <select id="area" lay-filter="area" lay-verify="required"
                            lay-reqtext="请选择联系地址"></select>
                </div>
                <div class="layui-input-inline" style="width: 40%">
                    <input type="text" name="address" placeholder="请输入详细地址" class="layui-input"
                           value="${info.address!}" style="width: 100%;">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">用户数量</label>
                <div class="layui-input-inline">
                    <input type="number" name="userNumber" lay-affix="number" min="0" step="1" placeholder="请输入用户数量" class="layui-input"
                           value="${info.userNumber!0}">
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="save">立即提交
                </button>
                <#if info._id ==''>
                    <button type="reset" class="layui-btn layui-btn-primary" id="btn-reset">重置</button>
                </#if>
                <input type="hidden" id="_id" name="_id" value="${info._id}"/>
            </div>
        </form>
    </div>
</div>
<script>
    layui.config({
        base: '${request.contextPath}/assets/lib/' //静态资源所在路径
    }).extend({
        layselect: "layselect"
    });
    layui.use(["edit", "layselect"], function () {
        let edit = layui.edit;
        let select = layui.layselect;
        let element = layui.element;
        edit.render()

        var upload = layui.upload;
        // 单图片上传
        var uploadIcon = upload.render({
            elem: '#ID-upload-icon-btn',
            url: '${request.contextPath}/comm/uploadRes', // 实际使用时改成您自己的上传接口即可。
            data: {//传递给上传接口的额外参数，支持静态赋值和动态赋值两种写法
                type: 'image',
                folder: "enterprise"
            },
            accept: "images",//指定允许上传时校验的文件类型。可选值有：images 图片类型file 所有文件类型video 视频类型audio 音频类型
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-icon-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-icon', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function (res) {
                console.log(res)
                // 若上传失败
                if (res.code <= 0) {
                    return layer.msg('上传失败！', {icon: 5});
                }
                var demoText = $('#ID-upload-icon-text');
                demoText.html('<a class="layui-btn layui-btn-xs  layui-btn-danger deleteImage">删除</a>');
                demoText.find('.deleteImage').on('click', function () {
                    $('#icon').val(""); // 图片链接（base64）
                    $('#ID-upload-icon-img').removeAttr('src'); // 图片链接（base64）
                    element.progress('filter-icon', '0%'); // 进度条复位
                    demoText.html("")
                });
                $('#icon').val(res.data); // 图片链接（base64）
                // 上传成功的一些操作
                //$('#ID-upload-simg-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-icon-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadIcon.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-icon', n + '%'); // 可配合 layui 进度条元素使用
                if (n === 100) {
                    layer.msg('上传成功', {icon: 1});
                }
            }
        });
        select.render({
            elem: "#province",
            selectValue: "${info.provinceCode!}",
            url: '${request.contextPath}/platform/area/select/0',//产品类型
            onselect: function (province, name) {//优先级高于form.on(select(obj))
                citySelect(province, null)
            }, completed: function (obj) {
                if (obj) {
                    citySelect(obj, "${info.cityCode!}")
                } else {
                    citySelect("", "")
                }
            }
        });

        function citySelect(code, value) {
            let _url = ""
            if (code) _url = "${request.contextPath}/platform/area/select/" + code;
            select.render({
                elem: "#city",//加载二级类型
                selectValue: value,
                url: _url,
                onselect: function (city, name) {
                    areaSelect(city, null)
                }, completed: function (obj) {
                    if (obj) {
                        areaSelect(obj, "${info.areaCode!}")
                    } else {
                        areaSelect("", "")
                    }
                }
            });
        }

        function areaSelect(code, value) {
            let _url = ""
            if (code) _url = "${request.contextPath}/platform/area/select/" + code;
            select.render({
                elem: "#area",//加载明细类型(三级菜单)
                selectValue: value,
                url: _url,
            });
        }

        $('#btn-reset').on('click', function () {
            $('#icon').val(""); // 图片链接（base64）
            $('#ID-upload-icon-img').removeAttr('src'); // 图片链接（base64）
            element.progress('filter-icon', '0%'); // 进度条复位
            $('#ID-upload-icon-text').html("")
        });
    });
</script>
</body>

</html>
